<template>
    <div class="center_div">
        <el-form ref="form" :model="meetingReserve" label-width="100px" style="margin-top:50px;">
            <el-form-item label="会议名称" prop="meetingname">
                <el-input v-model="meetingReserve.meetingname" style="width: 50%;"></el-input>
            </el-form-item>
            <el-form-item label="预计参加人数" prop="numberofparticipants">
                <el-input-number v-model="meetingReserve.numberofparticipants" controls-position="right" :min="1" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label="时间" prop="userTime">
                <el-date-picker
                        v-model="userTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="会议室" prop="roomid">
                <el-select v-model="meetingReserve.roomid" placeholder="请选择">
                    <el-option
                            v-for="item in roomList"
                            :key="item.roomid"
                            :label="item.roomname"
                            :value="item.roomid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申请原因" prop="reason">
                <el-input type="textarea" placeholder="请填写使用原因，越详细审批通过率越高哦" v-model="meetingReserve.description" style="width: 50%;"></el-input>
            </el-form-item>
            <el-form-item label="参会人员组" prop="group">
                <el-select v-model="departmentSelect" placeholder="请选择" @change="filterMethod">
                    <el-option
                            v-for="item in department"
                            :key="item.departmentid"
                            :label="item.departmentname"
                            :value="item.departmentid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="参会人员" prop="people">
                <el-transfer
                        :titles="['人员', '参会人员列表']"
                        v-model="peopleArrs"
                        :data="transferData">
                </el-transfer>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即申请</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "meeting-reserve",
        data() {
            return {
                transferData: [
                    {key: '1',label: '1',disabled: false},
                    {key: '2',label: '2',disabled: false},
                    {key: '3',label: '3',disabled: false}
                ],
                roomList: [
                    {roomid: 1, roomname: '公共会议室'},
                    {roomid: 2, roomname: '专用会议室'},
                    {roomid: 3, roomname: '测试会议室'},
                    {roomid: 4, roomname: '约会会议室'}
                ],
                userTime: [],
                peopleArrs: [],
                department: [],
                departmentSelect: "",
                meetingReserve: {meetingname: '',roomid: 1, numberofparticipants: '', starttime: '', endtime: '', description: '',status: 0}
            }
        },
        created() {
            this.fetchDepart()
            this.fetchRoom()
        },
        methods: {
            onSubmit() {
                if (this.userTime.length !== 2) {
                    this.$message.error('未选择日期')
                    return
                }
                if (this.meetingReserve.numberofparticipants.length === 0 || this.meetingReserve.description.length === 0 || this.meetingReserve.meetingname.length === 0) {
                    this.$message.error('存在参数未填写')
                    return
                }
                this.meetingReserve.starttime =  this.userTime[0]
                this.meetingReserve.endtime =  this.userTime[1]
                console.log(this.peopleArrs)
                console.log(this.meetingReserve)
                this.applyMeeting()
            },
            async fetchDepart(){
                let {code ,data ,msg} = await this.$post('/register')
                if(code === 200) {
                    this.department = data
                }else {
                    this.$message.error(msg)
                }
                console.log(this.department)
            },
            filterMethod() {
                // 根据query去请求后端的数据  接口 通过部门搜索部门人员
                console.log(this.departmentSelect)
                this.fetchDepartEmp(this.departmentSelect)
            },
            async fetchDepartEmp(depId) {
              this.transferData = []
              let {code ,data ,msg} = await this.$post('/getempsbydepid',
                      {data: {"depId": depId}})
              if(code === 200) {
                for (let i = 0; i < data.length; i++) {
                    let temp = {key: '0', label: '0', disabled: false}
                    temp.key = data[i].employeeid
                    temp.label = data[i].employeename
                    this.transferData.push(temp)
                }
              }else {
                this.$message.error(msg)
              }
            },
            async applyMeeting(){
              let {code ,data ,msg} = await this.$post('/doaddmeeting',
                      {data: {meeting: {
                                  "meetingid":this.meetingReserve.meetingid,
                                  "meetingname":this.meetingReserve.meetingname,
                                  "roomid":this.meetingReserve.roomid,
                                  "reservationistid":this.meetingReserve.reservationistid,
                                  "numberofparticipants":this.meetingReserve.numberofparticipants,
                                  "starttime":this.meetingReserve.starttime,
                                  "endtime":this.meetingReserve.endtime,
                                  "reservationtime":this.meetingReserve.starttime,
                                  "canceledtime":this.meetingReserve.endtime,
                                  "description":this.meetingReserve.description,
                                  "status":0
                              },
                            mps: this.peopleArrs}})
              if(code === 200) {
                console.log(data)
                  this.meetingReserve = {}
                this.$message({
                  message: '申请成功，请等待后序审批',
                  type: 'success'
                })
              }else {
                this.$message.error(msg)
              }
            },
            async fetchRoom(){
              let {code ,data ,msg} = await this.$post('/bookmeeting')
              if(code === 200) {
               this.roomList = data
              }else {
                this.$message.error(msg)
              }
            }
        }
    }
</script>

<style>
    .center_div{
        width: 60%;
        margin-left:auto;
        margin-bottom: 50px;
        margin-top: 50px;
    }
</style>